<template>
    <!-- 小程序搜索 -->
    <div>
        <el-form ref="searchFormRef" :model="searchInfo" label-width="80px" status-icon>
            <el-row>
                <el-col :span="10">
                    <el-form-item label="标题搜索" prop="title">
                        <el-input v-model="searchInfo.title" placeholder="请输入标题进行查找" />
                    </el-form-item>
                </el-col>
                <el-col :span="14">
                    <div style="display: flex; justify-content: flex-end">
                        <el-button type="primary" @click="search">查询</el-button>
                        <el-button @click="reset">重置</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed } from 'vue';

interface SearchInfo {
    title?: string;
}

interface Props {
    /** 搜索内容 */
    modelValue?: SearchInfo;
}

const props = withDefaults(defineProps<Props>(), {
    modelValue: () => {
        return { title: '' };
    }
});

const emit = defineEmits(['update:modelValue', 'submit']);

const searchInfo: any = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        emit('update:modelValue', val);
    }
});

const searchFormRef = ref();

const search = () => {
    emit('submit');
};

const reset = () => {
    searchInfo.value.title = '';
    emit('submit');
};
</script>
<style lang="scss" scoped>
.el-form-item {
    margin-bottom: 12px;
}
</style>
